Welcome to JavaScript!

7.15 传统事件绑定

行内绑定:语法:事件名=“执行函数”

结构+样式+行为都绑定在同一个标签中,不利于后期维护

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#laoLiu{

width:300px ; height:100px; line-height:30px; text-align:center ;

background:burlywood;margin:0 auto;

color:blue;font-size:24px;

}

</style>

<script type="text/javascript">

<!--1、行内绑定事件方法:在开始标签中绑定,把事件名当作元素属性-->

function abc(){

<!--Math.random() 取0到1之间的随机数-->

document.getElementById("laoLiu").innerText=Math.random();

}

</script>

</head>

<body>

<div id="laoLiu" onclick="abc()">我要学习</div>

</body>

</html>

鼠标点击元素后返回值:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#laoLiu{

width:300px ; height:100px; line-height:30px; text-align:center ;

background:burlywood;margin:0 auto;

color:blue;font-size:24px;

}

</style>

<script type="text/javascript">

<!--1、行内绑定事件方法:在开始标签中绑定,把事件名当作元素属性-->

function abc(){

<!--Math.random() 取0到1之间的随机数-->

document.getElementById("laoLiu").innerText=Math.random();

};

window.onload=function(){

var z=document.getElementById("laoLiu");

z.onclick=function(){

abc();

};

};

</script>

</head>

<body>

<div id="laoLiu" >我要学习</div>

</body>

</html>

结果同上